<template>
  <div id="app">
    <TitleBar></TitleBar>
    <div class="app-side">
      <div class="sidebar">
        <div class="sideContent">
          <div class="sideTuijian">
            <h3>推荐</h3>
            <div class="sideItem">
              <div class="item" @click="toSideUrl(1)">
                <img src="./assets/faxianyinyue.png" alt="">
                <span>发现音乐</span>
              </div>
              <div class="item" @click="toSideUrl(2)">
                <img src="./assets/sirenfm.png" alt="">
                <span>私人FM</span>
              </div>
              <div class="item" @click="toSideUrl(3)">
                <img src="./assets/shipin.png" alt="">
                <span>视频</span>
              </div>
              <div class="item" @click="toSideUrl(4)">
                <img src="./assets/dongtai.png" alt="">
                <span>动态</span>
              </div>
            </div>
          </div>
          <div class="sideTuijian">
            <h3>我的音乐</h3>
            <div class="sideItem">
              <div class="item" @click="toSideUrl(5)">
                <img src="./assets/bendiyinyue.png" alt="">
                <span>本地音乐</span>
              </div>
              <div class="item" @click="toSideUrl(6)">
                <img src="./assets/wodexiazai.png" alt="">
                <span>下载管理</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="renderContent">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import TitleBar from './views/TitleBar.vue';
export default {
  components: {
    TitleBar
  },
  data() {
    return {

    }
  },
  methods: {
    toSideUrl(type) {
      if (type == 1) {
        this.$router.push("/faxianmusic").catch(() => { })
      } else if (type == 2) {
        this.$router.push("/sirenfm").catch(() => { })
      } else if (type == 3) {
        this.$router.push("/video").catch(() => { })
      } else if (type == 4) {
        this.$router.push("/dongtai").catch(() => { })
      } else if (type == 5) {
        this.$router.push("/bendimusic").catch(() => { })
      } else if (type == 6) {
        this.$router.push("/download").catch(() => { })
      }
    },
  },
}
</script>
<style lang="scss">
body,
html {
  margin: 0;
  padding: 0;
}

.renderContent {
  padding: 10px;
}

.app-side {
  display: flex;

  .sidebar {
    height: calc(100vh - 80px);
    width: 230px;
    background-color: #f0f0f0;

    .sideContent {
      .sideTuijian {
        h3 {
          margin-left: 15px;
        }

        .sideItem {
          line-height: 40px;
          margin-left: 30px;

          .item {
            display: flex;
            align-items: center;
            cursor: pointer;

            img {
              width: 22px;
              height: 22px;
            }

            span {
              margin-left: 5px;
            }
          }

          .item:hover {
            cursor: pointer;
            font-weight: 700;
            color: #333333;
          }
        }
      }
    }
  }
}</style>
